<template>
    <div>
        <dv-charts :option="option"/>
    </div>
</template>

<script>
    //油表
    export default {
        route: false,
        data() {
            return {
                option: {
                    title: {
                        text: '剩余油量表'
                    },
                    series: [
                        {
                            type: 'gauge',
                            data: [
                                {name: '油箱A', value: 59},
                                {name: '油箱B', value: 78, radius: '40%'},
                                {name: '油箱C', value: 45, radius: '20%'}
                            ],
                            axisLabel: {
                                formatter: '{value}%'
                            },
                            pointer: {
                                valueIndex: 2,
                                style: {
                                    scale: [.6, .6]
                                }
                            },
                            details: {
                                show: true,
                                formatter: '{name}剩余{value}%',
                                position: 'start',
                                offset: [10, 0],
                                style: {
                                    fontSize: 13,
                                    textAlign: 'left'
                                }
                            }
                        }
                    ]
                }
            }
        }
    }

</script>

<style lang="scss">
    .charts-canvas-container {
        width: 178px;
        height: 300px !important;
        /*background-color: #fff;*/
    }
</style>